// main.ts
import { createApp, defineAsyncComponent } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
// 使用自定义指令
import { directive } from './directive/index'
directive(app)
// 引入样式
import 'normalize.css'
import '@/assets/styles/index.scss'
import router, { setupRouter } from './router/index'
// 状态管理
import { setupStore } from './stores/index'
// 挂载状态管理
setupStore(app)
// 注册语言
import { setupI18n } from './language/index'
setupI18n(app)
app.use(ElementPlus)
// 删格布局
// import VueGridLayout from 'vue-grid-layout'
// app.use(VueGridLayout)
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 引入图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 引入图标组件
const SvgIcon = defineAsyncComponent(
  () => import('@/components/svgIcon/index.vue')
)
app.component('SvgIcon', SvgIcon)
// 页面聚焦
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})
// 粒子动画
import Particles from '@tsparticles/vue3'
import { loadSlim } from '@tsparticles/slim'
app.use(Particles, {
  init: async engine => {
    await loadSlim(engine)
  }
})

// 挂载路由
setupRouter(app)

// 路由准备就绪后挂载APP实例
router.isReady().then(() => app.mount('#app', true))
// app.mount('#app')
